<template>
  <section class="allCon">
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城</el-breadcrumb-item>
        <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--start content-->
    <div class="content" id="content" ref="pageContent">
      <el-form :model="portalData.portalPageData" ref="ruleForm" label-width="100px" class="scroll">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title">
              网站设置
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站名称" prop="websiteName">
              <el-input v-model="portalData.portalPageData.websiteName" placeholder="请输入网站名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关键字" prop="websiteKeyword">
              <el-input v-model="portalData.portalPageData.websiteKeyword" placeholder="请输入网站关键字"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备案号" prop="websiteRecordNumber">
              <el-input v-model="portalData.portalPageData.websiteRecordNumber" placeholder="请输入网站备案号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版权信息" prop="websiteCopyright">
              <el-input v-model="portalData.portalPageData.websiteCopyright" placeholder="请输入网站版权信息"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="整站热搜" prop="websiteHotkey">
                <el-input type="textarea" v-model="portalData.portalPageData.websiteHotkey" placeholder="请输入网站整站热搜"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="网站描述" prop="websiteRemark">
                <el-input type="textarea" v-model="portalData.portalPageData.websiteRemark" placeholder="请输入网站描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title">
              图片设置
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="portal-row">
          <el-col :span="2" class="text-center">
             LOGO
          </el-col>
          <el-col :span="3">
          <el-upload
            class="over-hidden"
            :action="portalData.uploadUrl"
            list-type="picture-card"
            :data="portalData.logoPic.uploadData"
            :file-list="portalData.logoPic.fileList"
            :before-upload="logoBeforeAvatarUpload"
            :on-preview="logoPreview"
            :on-remove="logoRemove"
            :on-success="logoSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog v-model="portalData.logoPic.dialogVisible" size="tiny">
            <img width="100%" :src="portalData.logoPic.dialogImageUrl" alt>
          </el-dialog>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="portal-row">
          <el-col :span="2" class="text-center">
            ICON图标
          </el-col>
          <el-col :span="3">
            <el-upload
              class="over-hidden"
              :action="portalData.uploadUrl"
              list-type="picture-card"
              :data="portalData.iconPic.uploadData"
              :file-list="portalData.iconPic.fileList"
              :before-upload="iconBeforeAvatarUpload"
              :on-remove="iconRemove"
              :on-preview="iconPreview"
              :on-success="iconSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="portalData.iconPic.dialogVisible" size="tiny">
              <img width="100%" :src="portalData.iconPic.dialogImageUrl" alt>
            </el-dialog>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="portal-row">
          <el-col :span="2" class="text-center">
            微信二维码
          </el-col>
          <el-col :span="3">
            <el-upload
              class="over-hidden"
              :action="portalData.uploadUrl"
              list-type="picture-card"
              :data="portalData.wxPic.uploadData"
              :file-list="portalData.wxPic.fileList"
              :before-upload="wxBeforeAvatarUpload"
              :on-remove="wxRemove"
              :on-preview="wxPreview"
              :on-success="wxSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="portalData.wxPic.dialogVisible" size="tiny">
              <img width="100%" :src="portalData.wxPic.dialogImageUrl" alt>
            </el-dialog>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="btnBox">
      <el-button type="primary" @click="portalPage_saveBtn">保存</el-button>
      <el-button @click="portalPage_cancel">返回</el-button>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        websiteCode:"",    //存储上个页面获取的数据
        portalData:{
          portalPageData:{
            "websiteName":"",
            "websiteKeyword":"",
            "websiteRecordNumber":"",
            "websiteCopyright":"",
            "websiteRemark":"",
            "websiteLogoUrl":"",
            "websiteIconPicurl":"",
            "websiteWxPicurl":"",
            "websiteHotkey":"",
          },
          logoPic:{        //logo图片
            fileList:[],
              logoPicUrls:"",
              dialogImageUrl:"",
              dialogVisible:false,
              canUpload:true,
              fileListLength:"0",
              uploadData:{
                "moduleName":"portal",
                "fileName":"",
                "fromTable":"PortalWebsite",
                "fromCode":""
              }
            },
          iconPic:{        //icon图片
            fileList:[],
            iconPicUrls:"",
            dialogImageUrl:"",
            dialogVisible:false,
            canUpload:true,
            fileListLength:"0",
            uploadData:{
              "moduleName":"portal",
              "fileName":"",
              "fromTable":"PortalWebsite",
              "fromCode":""
            }
          },
          wxPic:{        //logo图片
            fileList:[],
            wxPicUrls:"",
            dialogImageUrl:"",
            dialogVisible:false,
            canUpload:true,
            fileListLength:"0",
            uploadData:{
              "moduleName":"portal",
              "fileName":"",
              "fromTable":"PortalWebsite",
              "fromCode":""
            }
          },
            uploadUrl:"/v3/misc/common/uploadFile",
        },

      }
    },
    watch:{
      //监视查询页面开始请求时带的图片数据，并展示出来
      "portalData.portalPageData.websiteLogoUrl":function(val,oldVal){
          if(val){
            this.portalData.logoPic.fileList.push({"url":""});
            this.portalData.logoPic.fileList[0].url = val;
          }
      },
      "portalData.portalPageData.websiteIconPicurl":function(val,oldVal){
        if(val){
          this.portalData.iconPic.fileList.push({url:""});
          this.portalData.iconPic.fileList[0].url = val;
        }
      },
      "portalData.portalPageData.websiteWxPicurl":function(val,oldVal){
        if(val){
          this.portalData.wxPic.fileList.push({url:""});
          this.portalData.wxPic.fileList[0].url = val;
        }
      },

    },
    methods: {

      //页面的保存按钮
      portalPage_saveBtn(){
        this.axios({
          method:"PUT",
          url:"/v3/portal/websites/"+this.websiteCode,
          data:{
            "websiteName":this.portalData.portalPageData.websiteName,
            "websiteKeyword":this.portalData.portalPageData.websiteKeyword,
            "websiteRecordNumber":this.portalData.portalPageData.websiteRecordNumber,
            "websiteCopyright":this.portalData.portalPageData.websiteCopyright,
            "websiteRemark":this.portalData.portalPageData.websiteRemark,
            "websiteHotkey":this.portalData.portalPageData.websiteHotkey,
            "websiteLogoUrl":this.portalData.logoPic.logoPicUrls,
            "websiteIconPicurl":this.portalData.iconPic.iconPicUrls,
            "websiteWxPicurl":this.portalData.wxPic.wxPicUrls,
          }
        }).then((res) => {
          this.Public.openSuccess(this,"操作成功！");
          this.$router.push({path:"/portalWebsite"});
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      /*LOGO图片上传  start*/
      logoBeforeAvatarUpload(file) {
        this.portalData.logoPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      logoRemove(file,fileList){
        this.portalData.logoPic.logoPicUrls = "";
      },

      logoPreview(file) {
        this.portalData.logoPic.dialogImageUrl = file.url;
        this.portalData.logoPic.dialogVisible = true;
      },

      logoSuccess(response, file, fileList){
        this.portalData.logoPic.logoPicUrls = response;
      },
      /* LOGO图片上传  end*/

      /*icon图片上传  start*/
      iconBeforeAvatarUpload(file) {
        this.portalData.iconPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      iconPreview(file) {
        this.portalData.iconPic.dialogImageUrl = file.url;
        this.portalData.iconPic.dialogVisible = true;
      },

      iconRemove(file,fileList){
        this.portalData.iconPic.iconPicUrls = "";
      },

      iconSuccess(response, file, fileList){
        this.portalData.iconPic.iconPicUrls = response;
      },
      /* icon图片上传  end*/

      /*微信二维码图片上传  start*/
      wxBeforeAvatarUpload(file) {
        this.portalData.wxPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传头像图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      wxPreview(file) {
        this.portalData.wxPic.dialogImageUrl = file.url;
        this.portalData.wxPic.dialogVisible = true;
      },

      wxRemove(file,fileList){
        this.portalData.wxPic.wxPicUrls = "";
      },

      wxSuccess(response, file, fileList){
        this.portalData.wxPic.wxPicUrls = response;
      },
      /* 微信二维码图片上传  end*/

    //页面管理返回按钮
      portalPage_cancel(){
        this.$router.push({path:"/portalWebsite"})
      },

    //进入页面时获取的数据
      queryInfo(){
        this.axios({
          method:"GET",
          url:"/v3/portal/websites/"+this.websiteCode,
          data:{}
        }).then((res) => {
          this.portalData.portalPageData = res.data;
          this.portalData.logoPic.logoPicUrls = this.portalData.portalPageData.websiteLogoUrl;
          this.portalData.iconPic.iconPicUrls = this.portalData.portalPageData. websiteIconPicurl;
          this.portalData.wxPic.wxPicUrls = this.portalData.portalPageData.websiteWxPicurl;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

    },

    created(){
      this.websiteCode = localStorage.getItem("websiteCode");
      this.queryInfo();
    },

    mounted() {
      // 设置窗口高度 start
      var winHieg = document.documentElement.clientHeight;
      var cont = document.getElementById("content");
      cont.style.height = winHieg - 115 + "px";
      document.querySelector(".content form").style.height = (document.documentElement.clientHeight - 180) + 'px';
    },
  }
</script>
<style scoped>

  .text-center{
    text-align: center;
  }

  .portal-row{
    padding-left: 10px;
    margin-bottom: 22px;
  }

  .over-hidden{
    width: 148px;
    height: 148px;
    overflow: hidden;
  }

  .allCon{
    position: relative;
  }

  .btnBox {
    position: absolute;
    bottom: 10px;
    left:10px;
    height: 50px;
    background: #fff;
    z-index: 100;
  }
  .btnBox1 {
    left:98px;
  }
  .scroll{
    overflow-y: auto;
    overflow-x:hidden;
    padding-right: 20px;
  }

  .title {
    height: 50px;
    color: #03B8CC;
    font-size: 16px;
  }

  .location{
    padding: 3px 0 15px 0;
  }

  .content{
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
    position: relative;
  }
</style>
